<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="6" style="margin-left:5px;">
				<el-input size="small" v-model="dictTreeSearchValue" placeholder="请输入内容" icon="search" @click="searchTree"></el-input>
			</el-col>
			<el-col :span="18" style="margin-right: -5px;">
				<el-col :span="1" style="">
					<p class="queryLabel">外观代码:</p>
				</el-col>
				<el-col :span="5" style="float: left;margin-left: 20px;">

					<el-input size="small" v-model="appearanceCode" placeholder="输入外观代码" style="width:120!important"></el-input>

				</el-col>
				<el-col :span="6">
					<el-button type="primary" size="small" v-on:click='carModelQuery'>查询</el-button>
					<el-button type="primary" size="small" v-on:click='carModelAdd'>新增</el-button>
					<el-button type="primary" size="small" v-on:click='editCarModel'>编辑</el-button>
					<el-button type="primary" size="small" v-on:click='unusedButton'>停用</el-button>
				</el-col>

			</el-col>
		</el-row>
		<el-row :gutter="24">
			<!-- 参数树 -->
			<el-col :span="6" style="padding-right: 5px!important;padding-left: 15px!important">
				<el-tree :data="paramTreeData" :filter-node-method="filterNode" :highlight-current=true :props="defaultProps" accordion @node-click="handleNodeClick" :auto-expand-parent=false ref="dictTree" node-key="id"></el-tree>
			</el-col>
			<el-col :span="18">
				<el-row v-if="carType=='0'">
					<el-table :data="carSeries.dataList" v-if="carType" stripe border height="460" @row-click='carSeriesRowClick' highlight-current-row >
						<el-table-column type="selection" width="60" fixed>
						</el-table-column>

						</el-table-column>
						<el-table-column prop="brandCode" label="品牌" width="200" >
						</el-table-column>
						<el-table-column prop="carSeriesCode" label="车系编码" width="200">
						</el-table-column>
						<el-table-column prop="carSeriesName" label="车系名称" width="200">
						</el-table-column>
						<!--<el-table-column prop="carModuleNo" label="车辆型号代码" width="200">
						</el-table-column>
						<el-table-column prop="carModule" label="车辆型号" width="200">
						</el-table-column>-->
						<!--<el-table-column prop="carTypeName" label="车型中文名称">
																										</el-table-column>
																										<el-table-column prop="carTypeCode" label="车辆型号代码">
																										</el-table-column>-->
						<!--<el-table-column prop="carSeriesLevel" label="车辆等级" width="120">
						</el-table-column>
						<el-table-column prop="resStatus" label="状态"  width="100">
						</el-table-column>-->
					</el-table>
					<el-pagination small v-if="carType" @size-change="handleGroupSizeChange" @current-change="handleGroupCurrentChange" :current-page="groupCurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="carSeries.total">
					</el-pagination>
				</el-row>
				<el-row :gutter="24" v-if="carType=='1'">
					<el-col :span="24">
						<el-table :data="carModel.dataList" stripe border style="width:100%" height="460" @selection-change="handleSelectionChange2">
							<el-table-column type="selection" width="60" fixed>
							</el-table-column>
							<el-table-column prop="appearanceCode" label="外观代码" width="400">
							</el-table-column>
							<el-table-column prop="appearanceName" label="外观名称" width="400">
							</el-table-column>
						</el-table>
						<el-pagination small @size-change="handleDictSizeChange" @current-change="handleDictCurrentChange" :current-page="dictCurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="carModel.total">
						</el-pagination>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
		</el-row>

		<!--车型表单 -->
		<el-dialog title="外观" v-model="carModelFormShow">
			<el-form :model="carSeriesFormData" ref="dictForm" :rules="carModelRule" label-width="150px">
				<el-col :span="24">
					<el-form-item label="车系编码" prop="carSeriesCode" required>
						<el-input size="small" v-model="dataCode" readonly></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="外观代码" prop="appearanceCode" required>
						<el-input size="small" v-model="carSeriesFormData.appearanceCode"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="外观名称" prop="appearanceName" required>
						<el-input size="small" v-model="carSeriesFormData.appearanceName"></el-input>
					</el-form-item>
				</el-col>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="carModelFormShow = false">取 消</el-button>
				<el-button type="primary" @click="saveCarModle">提交</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import moment from 'moment'
	export default {
		data: function() {
			return {
				//外观停用ID数组
				appearanceIds:[],
				//左侧数数据
				paramTreeData: [],
				//树型数据配置
				defaultProps: {
					children: 'child',
					label: 'label'
				},
				//字典树的过滤条件
				dictTreeSearchValue: '',
				//
				datalabel: '',
				
				//取车系编码
				dataCode:'',
				//品牌还是车型
				carType: '1',

				btnGroup: {},
				//分页设置
				page: this.page,
				//车系数据
				carSeries: {
					total: 0,
					dataList: []
				},
				//品牌编码
				brandCode: '',
				//车系查询条件
				groupValue: '',
				//车辆型号查询条件
				carModuleData: '',
				//车辆型号查询条件
				carModuleNoData: '',
				//字典数据
				carModel: {
					total: 0,
					dataList: []
				},
				//字典转换值
				brandConvertData: {},
				//等级转换
				levelConvertData: {},
				//类型
				type: '',
				//当前车系页
				groupCurentPage: 1,
				//当前字典页
				dictCurentPage: 1,
				//品牌下拉
				brandComboData: [],
				//车辆等级下拉
				levelComboData: [],
				//选中的车系编号
				carSeriesCode: '',
				//外观代码
				appearanceCode: '',
				//选中的车系名称
				carSeriesName: '',
				// 字典车系表单
				carSeriesShow: false,

				
				//字典车系数据
				carSeriesFormData: {
					carSeriesCode: "",
					appearanceCode: "",
					appearanceName: "",
					showLevel:"1",
					carSeriesId:"",
					carModelId:"",
					id:"",
				},
				carSeriesEmptyFormData: {
					appearanceCode: "",
					appearanceName: "",
					carSeriesCode: "",
					showLevel:"1",
					carSeriesId:"", //车系ID
					carModelId:"", // 车型ID
					id:"",
				},
		
				
				//字典表单
				carModelFormShow: false,

				
				//系统车系字典
				groupType: [],
				//业务系统字典
				moduleCombo: [],
				moduleCon: {},
				carModelRule: {
					appearanceCode: [{
						required: true,
						message: '请输入外观代码',
						trigger: 'blur'
					}],
					appearanceName: [{
						required: true,
						message: '请输入外观名称',
						trigger: 'blur'
					}],
				},

				//校验规则
				multipleSelection2: [],
				//新增时绑定的sericeId
				addSericeId:"",
			}
		},
		computed: {

		},
		methods: {
			//点击资源树节点
			handleNodeClick(data) {
				debugger;
				this.$data.carType = data.type;
				this.$data.datalabel = data.value;
				this.$data.dataCode = data.code;
				//this.$data.carSeriesFormData.carSeriesCode = data.code;
				//this.$data.addSericeId = data.value;
				this.$data.carSeriesFormData.carModelId = data.carModelId;
				if(data.type == '0') {
					this.carSeriesQuery();
					this.$data.carModel = [];

				} else {
					this.carModelQuery();
					this.$data.carSeries = [];
				}

			},
			//资源过滤
			filterNode: function(value, data, node) {
				if(!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			//查询树节点
			searchTree: function() {
				if(this.$data.dictTreeSearchValue == "") {
					this.$message("请输入查询条件");
					this.queryParamTree();
					return;
				}
				this.$refs.dictTree.filter(this.$data.dictTreeSearchValue);
			},
			//查询参数树
			queryParamTree: function() {
				//获取资源树
				debugger;
				this.$http.get(this.API_ROOT + '/base/car/tree', {
					params: {
						showLevel: this.$data.carSeriesFormData.showLevel,
					}					
				}).then((response) => {
					this.$data.paramTreeData = response.data;
				}, (response) => {});
			},
			//停用按钮
			unusedButton:function(){
				if(this.$data.multipleSelection2.length > 0){
					for(var i=0 ; i<this.$data.multipleSelection2.length ; i++){
					this.$data.appearanceIds[i] = this.$data.multipleSelection2[i].id;
					};
					
					this.$http.post(this.API_ROOT + '/scm/appearance/appearanceCancel',this.$data.appearanceIds)
					.then((response) => {
						if(response.data.success){
							this.$message(response.data.msg);
							this.carModelQuery();
						}
					},response => {});
				}
				else{
					this.$message.error("至少选择一条数据");
				}
				
			},
			//选择框
			handleSelectionChange2: function(val) {
				debugger;
				this.$data.multipleSelection2 = val;
				/*获得车系ID*/
				this.$data.carSeriesFormData.carSeriesId = this.$data.multipleSelection2[0].carSeriesId;
				this.$data.carSeriesFormData.carModelId = this.$data.multipleSelection2[0].carModelId;
				//外观id
				this.$data.carSeriesFormData.id = this.$data.multipleSelection2[0].id;
				
				
			},
			//车系行被点击
			carSeriesRowClick: function(row) {
				debugger;
				this.$data.carSeriesFormData.carSeriesCode = row.carSeriesCode;
				//this.$data.carSeriesName = row.carSeriesName;
				this.carModelQuery();
			},
			//车系查询
			carSeriesQuery: function() {
				debugger;
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/base/car/page',
					params: {
						type: this.$data.carType,
						bCode: this.$data.datalabel,
						start: this.$data.groupCurentPage,
						limit: this.$data.page.pageSize,
						carModule: this.$data.carModuleData,
						carModuleNo: this.$data.carModuleNoData,
					}
				}).then(function(resp) {
					resp.data.total = parseInt(resp.data.total);
					// es5写法
					this.$data.carSeries = resp.data;
					if(this.$data.carSeries.dataList.length > 0) {
						debugger;
						this.$data.carSeriesCode = this.$data.carSeries.dataList[0].carSeriesCode;
						//this.$data.carSeriesName = this.$data.carSeries.dataList[0].carSeriesName;
					} else {
						this.$data.carSeriesCode = '';
					}
					this.carModelQuery();
				}, function(error) {
					// error
				})
			},

			//字典车系，分页大小切换
			handleGroupSizeChange: function() {

			},
			//字典车系,当前页切换
			handleGroupCurrentChange: function(currentPage) {
				this.$data.groupCurentPage = currentPage;
				this.$data.carSeriesCode = '';
				this.carSeriesQuery();
			},

			//车型查询
			carModelQuery: function() {
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/scm/appearance/page',
					params: {
						//type: this.$data.carType,
						appearanceCode: this.$data.appearanceCode,//外观编码
						carSeriesCode: this.$data.dataCode,//车型编码
						start: this.$data.dictCurentPage,
						limit: this.$data.page.pageSize,
						carSeriesId: this.$data.datalabel,	//车系ID
						//carModule:this.$data.carModuleData,
						//carModuleNo:this.$data.carModuleNoData,
					}
				}).then(function(resp) {
					resp.data.total = parseInt(resp.data.total);
					debugger;
					this.$data.carModel = resp.data;	//serviceID *******
				}, function(error) {
					// error
				})

			},
			//车型增加
			carModelAdd: function() {
				debugger;
				this.$data.carSeriesFormData = Object.assign(this.$data.carSeriesFormData, this.$data.carSeriesEmptyFormData);
				this.$data.carSeriesFormData.carSeriesId = this.$data.datalabel;
				this.$data.carModelFormShow = true;
			},
			//字典，分页大小切换
			handleDictSizeChange: function() {

			},
			//字典,当前页切换
			handleDictCurrentChange: function(currentPage) {
				this.$data.dictCurentPage = currentPage;
				this.carModelQuery();
			},

			//编辑车型
			editCarModel: function() {
				
				if(this.$data.multipleSelection2.length == 1) {//判断车系类型

					var resRoleData = this.$data.multipleSelection2[0];

					this.$http.get(this.API_ROOT + '/scm/appearance/info', {

						params: {
							id: resRoleData.id
						}

					}).then((response) => {
						this.$data.carSeriesFormData = Object.assign(this.$data.carSeriesFormData, response.data.data);
					}, (response) => {
						// error callback
					});
					this.$data.carModelFormShow = true;
					debugger;

				} else {
					this.$message.error("请选择一条数据");
				}
				debugger;
			},
			//保存车型信息
			saveCarModle: function() {

				this.$refs.dictForm.validate(function(valid, $event) {
					// 验证通过
					this.$data.carSeriesFormData.carSeriesCode = this.$data.dataCode;
					
					
					if(valid) {
					this.$http.post(this.API_ROOT + '/scm/appearance/save', this.$data.carSeriesFormData)
							.then(resp => {
								if(resp.data.success) {
									this.$message(resp.data.msg);
									this.carModelQuery();
									this.$data.carModelFormShow = false;

								} else {
									this.$message.error(resp.data.msg);
								}
							}, resp => {

							});
					} else {
						return false
					}
				}.bind(this))
			},

		},
		//表单创建时执行
		created: function() {
			this.$data.carSeriesCode = '';
			//查询参数树
			this.queryParamTree();


		}
	}
</script>
<style>
	.el-table .info-row {
		height: 15px !important;
	}
	
	.item {
		width: 30px;
	}
	
	.el-dropdown .el-button-group,
	.el-table .el-tooltip,
	.el-table .el-tooltip__rel {
		display: inline;
	}
</style>